<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <link rel="stylesheet" type="text/css" href="../../css/defaultcss.css" />
    <link rel="stylesheet" type="text/css" href="../../css/amazeui.min.css" />
    <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
    <script src='../../js/amazeui.min.js'></script>
    <script src='../../js/flex.js'></script>
    <script src='../../layer/layer.js'></script>
    <script src='../../js/index.js'></script>
    <link rel="stylesheet" href="../../css/weui.min.css">
    <link rel="stylesheet" href="../../css/css/stylesheets/index.css">

</head>

<body>
    <header>
        <div class="goBack">
            <img src="../../img/base/back.png" alt="返回">
        </div>
        <span class="title"> 意见反馈 </span>
    </header>
    <div class="content application_enquiry feedback">
        <form id="fform">
            <ul class="form_ul">
                <li class="li_inp">
                    <label for="">姓名</label>
                    <input type="text" name="refName" value="" id="refName" placeholder="">
                </li>
                <li class="li_inp">
                    <label for="">联系方式</label>
                    <input type="text" name="refMobile" value="" id="refMobile" placeholder="">
                </li>
                <li class="li_inp">
                    <label for="">事件名称</label>
                    <input type="text" name="title" value="" id="title" placeholder="">
                </li>
                <div class="notice">
                    事件详情
                </div>
                <div class="option_text">
                    <textarea id="detail" name='detail' onpropertychange="checkIntroLength(this);" oninput="checkIntroLength(this);"></textarea>
                    <div class="num">
                        200字
                    </div>
                </div>
                <li class="img_box" id="img_box">
                </li>
                <li class="img_box" id="video_input">
                    <div class="img" id="img_4">
                        <img src="../../img/lawsuit/video.png" alt="">
                        <input type="file" id="file4" name="reffile4" />
                    </div>
                </li>
                <li class="video" id="video">
                    <video width="100%" height="100%" controls id="video_box" preload="meta">
                    </video>
                    <i>
                        <img src="../../img/lawsuit/delete.png" alt="">
                    </i>
                </li>
            </ul>
        </form>
        <div class="submitBtn">
            <button class="button" type="submit" id="submit">
						提交
					</button>
        </div>
    </div>
    <div class="am-modal am-modal-alert radiusModal" tabindex="-1" id="lawsuitModal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">温馨提示</div>
            <div class="am-modal-bd">
                问题已提交
                </br>请等待反馈!
            </div>
            <div class="am-modal-footer">
                <a href='./law_notice.html' class="am-modal-btn">确定</a>
            </div>
        </div>
    </div>
</body>

</html>

<script type="text/javascript">
    $("#submit").bind('click', function () {
        var isPhoneNum = /^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/; // 手机
        var refName = $("#refName").val();
        var refMobile = $("#refMobile").val();
        var title = $('#title').val();
        var detail = $('#detail').val();
        if (refName == "") {
            layer.open({
                title: '提示',
                content: "姓名不能为空！",
                btn: ['确定'],
            });
            return false;
        } else if (refMobile == "") {
            layer.open({
                title: '提示',
                content: "手机号不能为空！",
                btn: ['确定'],
            });
            return false;
        } else if (!isPhoneNum.test(refMobile)) {
            layer.open({
                title: '提示',
                content: "手机号格式有误！",
                btn: ['确定'],
            });
            return false;
        } else if (title == '') {
            layer.open({
                title: '提示',
                content: "事件名称不能为空！",
                btn: ['确定'],
            });
            return false;
        } else if (detail == "") {
            layer.open({
                title: '提示',
                content: "事件详情不能为空！",
                btn: ['确定'],
            });
            return false;
        }

        var imgArr = [];
        var form = new FormData($('#fform')[0]);
        HYIP.ajax({
            url: '/twoLaw/reflectSave.action',
            type: 'post',
            processData: false,
            data: form
        }, function (data) {
            $("#lawsuitModal").modal('open');
        });
        return false;
    })

    $('.goBack').bind('click', function () {
        window.history.back()
    })

    $(function () {
        var img_msg = '';
        var addNumArr = [1, 2, 3]; //file的id名字（跟后台对应）
        var isLast = false; //是否最后一个
        var addImg = function (num) {
            //添加上传图片按钮
            img_msg = '<div class="img">                                            ' +
                '    <img src="../../img/lawsuit/img.png" alt="">             ' +
                '    <input type="file" data-id="' + num + '" id="file' + num + '" name="reffile' +
                num +
                '" />         ' +
                '    <i>                                                      ' +
                '        <img src="../../img/lawsuit/delete.png" alt="">      ' +
                '    </i>                                                     ' +
                '    <img src="" alt="" id="apfileimg' + num + '" class="imgFile">      ' +
                '</div>                                                       '
            $('#img_box').append(img_msg);
            addImgFunc();

            //显示图片、上传图片
            $("#img_box .img input").on('change', function () {
                var file = this.files[0];
                var index = $(this).parent().index();
                if (index == 2) {
                    isLast = true;
                }
                // console.log(isLast)
                if (this.files && file) {
                    // console.log(addNumArr)
                    if (addNumArr.length < 3 && addNumArr.length > 0) {
                        addImg(addNumArr[0]);
                        addNumArr.splice(0, 1);
                    }
                }
                // console.log(addNumArr)
            });
            //删除按钮
            $('#img_box .img i').off("click").bind('click', function () {
                var img_id = $(this).siblings('input').data('id');
                addNumArr.push(img_id);
                // console.log(addNumArr)
                //删除对应div
                $(this).parent().remove();
                if (isLast) {
                    //调用添加按钮
                    addImg(addNumArr[0]);
                    addNumArr.splice(0, 1);
                    isLast = false;
                }
            });
        }

        addImg(addNumArr[0]);
        addNumArr.splice(0, 1);

    });

    function checkIntroLength(obj) {
        var max = 200;
        if (obj.value.length > max) {
            obj.value = obj.value.substring(0, max);
        }
        $(".option_text .num").text(200 - obj.value.length + '字');
    }
</script>